/**
 * Created by zsgjs on 2017/2/13.
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
} from 'react-native';

import model from '../classes/Model';

import cssModel from '../classes/CssModel'

var investStyle = cssModel.styles;

const Invest = React.createClass({

    getInitialState() {
        var data = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
            investData: data
        }
    },

    render() {
        return (
            <View style={investStyle.container}>
                <View style={investStyle.navStyle}>
                    <View style={investStyle.navContent}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={this.back}>
                            <Text style={investStyle.leftItem}>{'VIP服务'}</Text>
                        </TouchableOpacity>
                        <Text style={investStyle.navTitle}>投资</Text>
                        <Text style={investStyle.rightItem}>客服</Text>
                    </View>
                </View>
                <ListView
                    dataSource={this.state.investData}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}
                ></ListView>

            </View>

        )
    },

    _renderHeader() {
        return (
            <Image style={investStyle.adPicture}>

            </Image>
        )
    },

    _renderRow(data) {
        return (
            <View style={investStyle.cellStyle}>
                <View style={investStyle.cellContent}>
                    <View style={investStyle.lefftContent}>
                        <Image style={investStyle.icon}></Image>

                        <View style={investStyle.textContent}>
                            <Text style={investStyle.name}>{data}</Text>
                            <Text
                                numberOfLines={2}
                                style={investStyle.detail}
                            >阿斯顿发生京东首发收款激动撒拉就爱上的开发is地京东卡萨s收到的</Text>
                        </View>
                    </View>
                    <TouchableOpacity><Text style={investStyle.rightButton}>立即交易</Text></TouchableOpacity>
                </View>
                <View style={investStyle.seperatorLine}></View>
            </View>
        )
    },

    componentDidMount() {
        var fetchData = {
            header: 'header',
            data:['光贵头角', '集中盘', '广东石化', '甬交所', '广贵中心', '津贵所', '横琴稀贵', '光贵头角', '光贵头角', '光贵头角']
        };

        this.setState({
            investData: this.state.investData.cloneWithRows(fetchData.data)
        })
    }

});

module.exports = Invest;